<template>
  <div class="index">
    <nav1></nav1>
    <div class="overview-wrapper">
      <div class="overview-wrapper__left-content">
        <div class="content-nav">
          <span :class="{ 'selected': navTab == 0}" class="content-nav__span" @click="changeTitle(0)">剑雅真题</span>
          <span :class="{ 'selected': navTab == 1}" class="content-nav__span ml40" @click="changeTitle(1)">雅思模考题</span>
        </div>
        <div class="content-inner">
          <div>
            <div class="list__item" v-for="(item,index) in list" :key="index">
              <p class="list__item-title">剑雅{{index+1}}</p>
              <div class="card-wrapper" v-for="(item2,index2) in item.children" :key="index2" @click="showModal(item)">
                <p class="card-wrapper__title">Test {{index2+1}}</p>
                <dl class="Myresults clearfix">
                  <dt>平台平均：</dt>
                  <dd>
                    <p>听力：6.5</p>
                    <p>阅读：6.5</p>
                  </dd>
                </dl>
                <div class="card-wrapper__underline">
                  <p class="card-wrapper__underline-inner" style="width: 100%;"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <div class="listpopBox">
        <div>
          <h1>剑雅15-Test 2 选择考试科目</h1>
          <p>支持单科考试及组合考试</p>
          <div class="text-center">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="听力"></el-checkbox>
              <el-checkbox label="阅读"></el-checkbox>
              <el-checkbox label="写作"></el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="kmbntbox"><a class="listclose" @click="StartExam">开始考试</a></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import nav1 from '../components/nav1.vue'
  export default {
    data() {
      return {
        navTab: 0,
        dialogVisible: false,
        checkList: ['听力', '阅读', '写作'],
        list: [{
          children: [{}, {}, {}, {}, {}]
        }, {
          children: [{}, {}, {}, {}, {}]
        }, {
          children: [{}, {}, {}, {}, {}]
        }, {
          children: [{}, {}, {}, {}, {}]
        }, {
          children: [{}, {}, {}, {}, {}]
        }, {
          children: [{}, {}, {}, {}, {}]
        }]
      }
    },
    components: {
      nav1
    },
    methods: {
      search() {
        this.$post('/api/papers/pages', {})
          .then((res) => {
            if (res.code == 200) {

            } else {

            }
          }).catch(err => {

          })
      },
      handleClose() {
        this.dialogVisible = false;
      },
      showModal(row) {
        this.dialogVisible = true;
      },
      StartExam() {
        if (this.checkList.length == 0) {
          alert('请选择考试内容');
          return false;
        }
        this.$router.push('/detail');
      },
      changeTitle(tab) {
        this.navTab = tab;
      }
    },
    created() {
      this.search();
    }
  }

</script>

<style lang="less" scoped>
  .ml40 {
    margin-left: 40px;
  }

  .text-center {
    text-align: center;
  }

  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .listpopBox {
    width: 100%;
    height: 100%;
    position: relative;
    background: #fff;

    h1 {
      color: #333;
      font-size: 22px;
      line-height: 20px;
      text-align: center;
      font-weight: 700;
      font-family: Microsoft YaHei UI;
    }

    p {
      padding: 20px 0;
      color: #666;
      font-size: 14px;
      line-height: 22px;
      text-align: center;
      font-weight: 400;
      font-family: Microsoft YaHei;
    }

    .kmbntbox {
      text-align: center;

      a {
        display: inline-block;
        border: 1px solid #7c7ae6;
        border-radius: 4px;
        color: #7c7ae6;
        width: 170px;
        height: 40px;
        margin: 20px;
        font-weight: 400;
        font-size: 16px;
        font-family: Microsoft YaHei;
        line-height: 40px;
        -webkit-box-shadow: 0 4px 4px 0 rgba(175, 174, 225, .71);
        box-shadow: 0 4px 4px 0 rgba(175, 174, 225, .71);
        cursor: pointer;

        &:hover {
          border-radius: 4px;
          color: #fff;
          background: #7c7ae6;
        }
      }
    }
  }

  .overview-wrapper {
    position: relative;
    width: 1180px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    overflow: hidden;

    .overview-wrapper__left-content {
      min-height: 100vh;
      margin-bottom: 30px;
      background: #fff;

      .content-inner {
        padding-top: 40px;
        padding-left: 30px;
        padding-right: 6px;

        .list__item-title {
          font-size: 18px;
          padding-bottom: 24px;
          color: #333;
        }

        .card-wrapper {
          display: inline-block;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          width: 187px;
          height: 110px;
          margin-right: 24px;
          margin-bottom: 39px;
          padding: 20px 10px;
          position: relative;
          border: 1px solid #e6e6f2;
          border-radius: 4px;
          overflow: hidden;
          background-color: #f1f1fc;
          opacity: .83;
          cursor: pointer;

          &:hover {
            background-color: #fff;
          }

          .card-wrapper__title {
            margin-bottom: 10px;
            padding-left: 9px;
            color: #333;
            font-size: 22px;
            line-height: 22px;
          }

          .Myresults {
            line-height: 20px;

            dt {
              float: left;
              width: 80px;
              text-align: right;
            }

            dd {
              float: left;
              width: 75px;
              text-align: left;
            }
          }

          .card-wrapper__underline {
            width: 100%;
            height: 5px;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #d4d3fd;

            .card-wrapper__underline-inner {
              height: 100%;
              background-color: #7c7ae6;
            }
          }
        }
      }

      .content-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 700;
        color: #333;
        line-height: 20px;
        overflow: hidden;
        padding: 30px;
        -webkit-box-shadow: 0 0 6px 0 hsla(0, 0%, 80.8%, .3);
        box-shadow: 0 0 6px 0 hsla(0, 0%, 80.8%, .3);
        -webkit-box-shadow: 0 4px 10px 0 rgba(96, 151, 255, .15);
        box-shadow: 0 4px 10px 0 rgba(96, 151, 255, .15);

        .content-nav__span {
          color: #666;
          font-weight: 400;
          font-size: 14px;
          font-family: Microsoft YaHei;
          line-height: 20px;
          position: relative;
          cursor: pointer;
        }

        .content-nav__span.selected {
          color: #7c7ae6;
          text-decoration: underline;
        }
      }
    }
  }

</style>
